<template>
  <div class="main_box">
    <CommonHeader title="重点考核指标"></CommonHeader>
    <div class="main_content">
      <div class="nav_wrap">
        <div class="tit">选择时间：</div>
        <div class="content" @click="dateShow = true">
          <div>{{ currentDate }}</div>
          <i class="down"></i>
        </div>
      </div>
      <div class="quota_box">
        <div class="quota_item1">
          <div class="head">
            <div class="tit">{{ query.quotaName }}</div>
            <div class="inx">
              <div class="num1" :class="formateSignage(query.signage)">
                <span class="title-name">排名</span>
                {{ query.position }}
                <span class="grey">名</span>
              </div>
            </div>
          </div>
          <div class="info flex-around">
            <div v-for="item in query.dimensionArr" :Key="item.index">{{ item.name }}：{{ item.value }}</div>
          </div>
          <div class="footer">
            <div class="footer-text">截至{{ sliceDate(query.issueNo) }}</div>
          </div>
        </div>
      </div>
      <div class="quota_box" style="display: flex; flex-wrap: wrap">
        <div class="quota_item" v-for="(item, index) in quotaList" :key="index" @click="toDetail(item)" :class="item.sign == '2' ? 'active' : ''">
          <div class="tit">{{ item.quotaName }}</div>
          <div class="flex" style="justify-content: space-between">
            <div class="num">
              <div class="num1" :class="formateSignage(item.signage)">
                {{ item.position }}
              </div>
              <div class="num2">
                <div class="up" v-if="item.prePosition !== 0 && item.position - item.prePosition < 0">
                  <i class="icon"></i>
                  {{ item.prePosition - item.position }}
                </div>
                <div class="down" v-if="item.prePosition !== 0 && item.position - item.prePosition > 0">
                  <i class="icon"></i>
                  {{ item.position - item.prePosition }}
                </div>
                <div class="no" v-if="item.prePosition === 0 || item.position - item.prePosition === 0">- -</div>
              </div>
            </div>
            <div class="block" :class="formateSignage(item.signage)"></div>
          </div>
          <div class="inx flex-around">
            <div class="info">
              <span v-if="item.position">完成率排名</span>
            </div>
          </div>
          <div class="content" v-for="obj in item.dimensionArr" :key="obj.index">
            <div class="left">{{ obj.name }}</div>
            <div class="right">{{ obj.value }}</div>
          </div>
          <div class="leader" v-if="query.level != 0">
            <div class="tit">责任领导</div>
            <div class="person">
              <div v-for="p in item.empList" :key="p.index">{{ p }}</div>
            </div>
          </div>
          <div class="footer">{{ item.issueNo }}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="dateShow" round position="bottom" get-container="#app">
      <van-picker show-toolbar :default-index="5" :columns="yearList" confirm-button-text="确定" cancel-button-text="取消" @confirm="onConfirm" @cancel="dateShow = false" />
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';

export default {
  name: 'fanDetail',
  components: {
    CommonHeader,
  },
  data() {
    return {
      dateShow: false,
      currentDate: '',
      yearList: [],
      quotaList: [
        // {
        //   quotaName: '温州大学',
        //   position: '1', // 排名
        //   dimensionArr: [
        //     {
        //       name: '任务数',
        //       value: '40',
        //     },
        //     {
        //       name: '完成数',
        //       value: '24',
        //     },
        //     {
        //       name: '完成率',
        //       value: '60%',
        //     },
        //   ],
        //   empList: ['王舜'],
        //   issueNo: '2022-3',
        //   level: '2',
        //   sign: '2',
        //   signage: '0', // 排名状态
        // },

        {
          quotaName: '温州市高教新区发展中心',
          position: '1', // 排名
          dimensionArr: [
            {
              name: '任务数',
              value: '30',
            },
            {
              name: '完成数',
              value: '18',
            },
            {
              name: '完成率',
              value: '60%',
            },
          ],
          empList: ['丁若菱'],
          issueNo: '2022-3',
          level: '2',
          sign: '2',
          signage: '0', // 排名状态
        },

        // {
        //   quotaName: '温州医科大学',
        //   position: '3', // 排名
        //   dimensionArr: [
        //     {
        //       name: '任务数',
        //       value: '50',
        //     },
        //     {
        //       name: '完成数',
        //       value: '28',
        //     },
        //     {
        //       name: '完成率',
        //       value: '56%',
        //     },
        //   ],
        //   empList: ['王良兴'],
        //   issueNo: '2022-3',
        //   level: '2',
        //   sign: '2',
        //   signage: '0', // 排名状态
        // },

        {
          quotaName: '瓯海区经信局',
          position: '2', // 排名
          dimensionArr: [
            {
              name: '任务数',
              value: '40',
            },
            {
              name: '完成数',
              value: '19',
            },
            {
              name: '完成率',
              value: '47.5%',
            },
          ],
          empList: ['徐卢笛'],
          issueNo: '2022-3',
          level: '2',
          sign: '2',
          signage: '', // 排名状态
        },

        {
          quotaName: '瓯海区金融工作服务中心',
          position: '3', // 排名
          dimensionArr: [
            {
              name: '任务数',
              value: '3',
            },
            {
              name: '完成数',
              value: '1',
            },
            {
              name: '完成率',
              value: '33.3%',
            },
          ],
          empList: ['沈思思'],
          issueNo: '2022-3',
          level: '2',
          sign: '2',
          signage: '', // 排名状态
        },

        {
          quotaName: '瓯海区科技局',
          position: '4', // 排名
          dimensionArr: [
            {
              name: '任务数',
              value: '40',
            },
            {
              name: '完成数',
              value: '10',
            },
            {
              name: '完成率',
              value: '25%',
            },
          ],
          empList: ['周肖瑜'],
          issueNo: '2022-3',
          level: '2',
          sign: '2',
          signage: '', // 排名状态
        },

        // {
        //   quotaName: '温州理工学院',
        //   position: '7', // 排名
        //   dimensionArr: [
        //     {
        //       name: '任务数',
        //       value: '10',
        //     },
        //     {
        //       name: '完成数',
        //       value: '2',
        //     },
        //     {
        //       name: '完成率',
        //       value: '20%',
        //     },
        //   ],
        //   empList: ['吴向鹏'],
        //   issueNo: '2022-3',
        //   level: '2',
        //   sign: '2',
        //   signage: '1', // 排名状态
        // },

        {
          quotaName: '瓯海区委宣传部',
          position: '5', // 排名
          dimensionArr: [
            {
              name: '任务数',
              value: '3',
            },
            {
              name: '完成数',
              value: '0',
            },
            {
              name: '完成率',
              value: '0%',
            },
          ],
          empList: ['王芬'],
          issueNo: '2022-3',
          level: '2',
          sign: '2',
          signage: '1', // 排名状态
        },
      ],
    };
  },
  computed: {
    formateSignage() {
      return function (id) {
        switch (id) {
          case '0':
            return 'green';
          case '1':
            return 'red';
          default:
            return '';
        }
      };
    },
    sliceDate() {
      return function (date) {
        if (date && date.length >= 7) {
          return date.slice(0, 7);
        } else {
          return '';
        }
      };
    },
  },
  created() {
    this.query = this.$route.query;
    const year = new Date().getFullYear();
    this.currentDate = this.$route.query.year || year;
    this.initYearList();
  },
  methods: {
    initYearList() {
      this.currentDate = parseInt(this.currentDate);
      this.yearList = [
        this.currentDate - 5,
        this.currentDate - 4,
        this.currentDate - 3,
        this.currentDate - 2,
        this.currentDate - 1,
        this.currentDate,
        this.currentDate + 1,
        this.currentDate + 2,
      ];
    },
    onConfirm(params) {
      this.currentDate = params;
      this.dateShow = false;
    },
  },
};
</script>


<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_content {
  padding: 10px 15px;
  box-sizing: border-box;
  text-align: left;
  background-color: #f4f5fa;
}
.nav_wrap {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.nav_wrap .tit {
  width: 100px;
  font-size: 14px;
  color: #999;
}
.nav_wrap .content {
  width: 100%;
  font-size: 14px;
  color: #333;
  display: flex;
  line-height: 18px;
}
.nav_wrap .content .down {
  width: 15px;
  height: 8px;
  background: url('../../assets/image/down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  top: 5px;
}
.quota_box {
  margin-top: 15px;
}
.quota_item1 {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: left;
  padding: 10px 15px;
  box-sizing: border-box;
}
.quota_item1 .head {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
  padding-bottom: 10px;
}
.quota_item1 .head .tit {
  max-width: 200px;
  height: 20px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  border-left: 4px solid #367fff;
  padding-left: 10px;
  box-sizing: border-box;
}
.quota_item1 .head .inx {
  display: flex;
}
.quota_item1 .head .num1 {
  font-size: 24px;
  color: #4ca5f1;
  font-weight: bold;
  margin-right: 10px;
}
.quota_item1 .head .num1 .grey {
  color: #bcc0c7;
  font-size: 13px;
  font-weight: normal;
  vertical-align: middle;
}
.quota_item1 .head .num1.red {
  color: #e43c26;
}
.quota_item1 .head .num1.green {
  color: #5bc55a;
}
.quota_item1 .head .num1 .title-name {
  color: #bcc0c7;
  font-size: 13px;
  font-weight: normal;
  vertical-align: middle;
}
.quota_item1 .info {
  font-size: 13px;
  color: #a3a7ad;
  margin-top: 16px;
}
.quota_item1 .footer .footer-text {
  color: #d3d7e0;
  font-size: 12px;
  margin-top: 8px;
}

/deep/ .resetPicker .van-picker__columns .van-picker-column:nth-child(2) {
  display: none;
}
.quota_box_title {
  font-size: 13px;
  color: #333333;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 16px;
}
.quota_box_title.help {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
}
.quota_box_title.help .btn {
  position: fixed;
  right: 15px;
  top: 220px;
  width: 56px;
  height: 56px;
  background-color: #f60e36;
  border-radius: 50%;
  font-weight: normal;
  font-size: 12px;
  color: #fff;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 9px 13px;
  cursor: pointer;
  z-index: 9999;
}
.rank-content {
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}
.rank-content-head {
  padding: 0 16px;
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #a6a9b3;
  background: #f5f7fb;
  box-sizing: border-box;
}
.rank-content-head > div:first-child {
  width: 30%;
}
.rank-content-head > div:last-child {
  width: 20%;
  text-align: center;
}
.rank-content-head > div:nth-child(2) {
  width: 50%;
  text-align: center;
}
.rank-content-list {
  margin-top: 16px;
  padding: 0 16px;
  box-sizing: border-box;
}
.rank-content-list-left {
  width: 30%;
}
.rank-content-list-mid {
  width: 50%;
  text-align: center;
}
.rank-content-list-right {
  width: 20%;
  text-align: center;
}
.rank-content-list-left,
.rank-content-list-mid {
  font-size: 13px;
  color: #666;
}
.rank-content-list-right {
  font-size: 13px;
  color: #4180f2;
  font-weight: bold;
}
.rank-content-list-right.red {
  color: #f60e36;
}
.rank-content-list-right.green {
  color: #5bc55a;
}
#main {
  background: #fff;
}
.btn_box >>> .van-button {
  width: 90%;
  margin-top: 20px;
}

.quota_box {
  margin-top: 15px;
}
.quota_box >>> .van-list {
  display: flex;
  flex-wrap: wrap;
}
.quota_box >>> .van-list__finished-text,
.quota_box >>> .van-list__loading {
  width: 100%;
  margin: 0 auto;
  font-size: 14px;
}
.quota_box .quota_item {
  width: 48%;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 15px;
  font-size: 14px;
  padding: 10px;
  color: #333;
}
.quota_box .quota_item.active {
  background-color: #fafafa;
}
.quota_box .quota_item:nth-child(2n + 1) {
  margin-right: 4%;
}
.quota_box .quota_item > .tit {
  font-weight: bold;
}
.quota_box .quota_item .num {
  display: flex;
  margin-top: 10px;
}
.quota_item .num .num1 {
  font-size: 32px;
  color: #4ca5f1;
  font-weight: bold;
  margin-right: 10px;
}
.quota_item .num .num1.red {
  color: #e43c26;
}
.quota_item .num .num1.green {
  color: #5bc55a;
}
.quota_box .inx {
  font-size: 12px;
  color: #bdc0c7;
  margin-top: 5px;
}
.quota_box .inx .info {
  width: 90px;
  margin-bottom: 5px;
  height: 22px;
  line-height: 22px;
}
.quota_box .inx .warning {
  width: 90px;
  font-size: 12px;
  text-align: center;
  background-color: #fedae0;
  color: #f60e36;
  border-radius: 5px;
  height: 22px;
  line-height: 22px;
}
.quota_box .inx .warning div {
  font-size: 20px;
  white-space: nowrap;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.5);
  margin-left: 4px;
}
.quota_box .content,
.quota_box .leader {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #a3a7ad;
  margin-top: 5px;
}
.quota_box .leader .tit {
  width: 120px;
}
.quota_box .leader .person {
  width: 120px;
  text-align: right;
}
.block {
  width: 30px;
  height: 31px;
  background: url('../../assets/image/blue_card.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 12px;
}
.block.red {
  background: url('../../assets/image/red_card.png') no-repeat;
  background-size: 100% 100%;
}
.block.green {
  background: url('../../assets/image/green_card.png') no-repeat;
  background-size: 100% 100%;
}
.quota_item .footer {
  width: 100%;
  text-align: right;
  font-size: 12px;
  color: #a3a7ad;
  margin-top: 10px;
}
</style>